<template>
	<!-- 全局的按钮样式 -->
	<view class="u-flex u-row-center btn u-flex-1" :style="{
		borderRadius:`${radius}rpx`,
		width:btnWidth,
		height:`${height}rpx`,
		lineHeight:`${height}rpx`,
		backgroundColor:backgroundColor ,
		border:`1rpx solid ${borderLineColor}`,
		color:fontColor
	}" @click.stop="click">
		<view class="u-margin-right-10" v-if="loading">
			<u-loading mode="circle" v-show="loading" :color="fontColor"></u-loading>
		</view>
		<view>
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"item-btn",
		props: {
			// 显示加载中的样式
			loading: {
				type: Boolean,
				default: false
			},
			//圆角
			radius:{
				type:[String,Number],
				default:52
			},
			//宽度
			width:{
				type:[String,Number],
				default:190
			},
			//是否独占一行
			block:{
				type:Boolean,
				default:false
			},
			height:{
				type:[String,Number],
				default:60
			},
			bgColor:{
				type:String,
				default: ''
			},
			borderColor:{
				type:String,
				default: ''
			},
			txtColor:{
				type:String,
				default: ''
			}, 
			// 是否镂空
			type:{ //plain
				type:String,
				default:''
			},
			// 是否禁止点击
			disabled:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			// 是否镂空
			isPlain(){
				return this.type==='plain'
			},
			//按钮背景色
			backgroundColor() {
				const bgColor = this.bgColor ? this.bgColor : (this.isPlain ? 'transparent' : this.currentThemeObj.primary)
				return bgColor
			},
			//按钮边框
			borderLineColor(){
				return this.borderColor ? this.borderColor : ( this.isPlain ? '#4D4D4D' : this.backgroundColor)
			},
			fontColor(){
				return this.txtColor ? this.txtColor : (this.isPlain ? '#333333' : 'white')
			},
			btnWidth(){
				const isBlock = this.block;
				return isBlock ? 'calc(100vw - 64rpx)' : (!isNaN(this.width) ? this.width + 'rpx' : this.width)
			}
		},
		methods: {
			click(e) {
				!this.disabled&&this.$emit('click',e)
			}
		},
	}
</script>

<style lang="scss" scoped>
.btn{
	padding:0 10rpx;
	white-space: nowrap;
	// &.btn-disabled{
		
	// }
	// &+.btn{
	// 	margin-left: 26rpx;
	// }
}
</style>
